<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
            overflow: hidden;
        }
        #demo {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: white;
        }
    </style>
</head>
<body>
      <canvas id="demo"></canvas>
</body>
<script>
    window.onload = function (){
        var canvas = document.getElementById("demo");
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var value = 0;
        var flag = 0;
        if (canvas.getContext){
            var ctx = canvas.getContext("2d");

            setInterval(function (){
                ctx.clearRect(0,0,canvas.width,canvas.height)
                flag++;
                value+=10;
                if (flag==8){
                    flag=1
                }
                var img = new Image();
                img.src = "img/q_r"+(flag)+".jpg";
                img.onload = function (){
                    draw(this);
                }
            },100)
            function draw(img){
                ctx.drawImage(img,value,0);
            }
        }
    }
</script>
</html>